<template>
	<div :id="model.id" class="image" :class="[`terminal${terminal}`]">
		<a class="a-link" @click="jumpLink(model.data.linkObj)">
			<el-image :src="model.data.imageUrl" :fit="model.data.fit" :height="`${model.data.height}px`" :style="{height: `${model.data.height}px`}">
				<template #error>
					<div class="image-slot">
						<el-icon><Picture /></el-icon>
					</div>
				</template>
			</el-image>
		</a>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	import { Picture } from '@element-plus/icons-vue'

	export default {
		name: 'image-text-basics',
		components: { Picture },
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
.image {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background-color: transparent;
	text-align: center;
	
	.a-link {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	.el-image{
		display: flex;
		width: 100%;
	}
	
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
		text-align: center;
	}
	.image-slot .el-icon {
		font-size: 30px;
	}
}
</style>